<template>
  <div class="user">
    <div class="user_top">
      <img :src="headImg" width="70" alt="" />
      <h3 v-if="fex">{{ username }}</h3>
      <h3 v-else>点击登录</h3>
      <van-icon :name="!fex ? 'arrow' : 'cross'" @click="loginFn" />
    </div>
    <!-- 模态框 -->
    <div class="modal" v-show="box">
      <!-- 遮罩层 -->
      <div class="modal_bg" @click="box = false"></div>
      <div class="modal_content">
        <!-- 登陆表单 -->
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
    <van-grid :column-num="3" :gutter="20" :border="border" class="text1">
      <van-grid-item icon="bookmark-o" text="我的订单" />
      <van-grid-item icon="bill" text="优惠卷" />
      <van-grid-item icon="card" text="礼品卡" />
      <van-grid-item icon="like-o" text="我的收藏" />
      <van-grid-item icon="photo-o" text="我的足迹" />
      <van-grid-item icon="gift" text="会员福利" />
      <van-grid-item icon="map-marked" text="地址管理" />
      <van-grid-item icon="setting" text="账号安全" />
      <van-grid-item icon="service" text="联系客服" />
      <van-grid-item icon="friends" text="帮助中心" />
      <van-grid-item icon="photo-o" text="意见反馈" />
    </van-grid>
  </div>
</template>
<script>
//引入登陆注册请求
import { loginBy } from "@/utils/http";
import headImg from "@/assets/kkk.jpg";
import headImg1 from "@/assets/ccc.jpg";
export default {
  data() {
    return {
      //设置一个登陆开关
      fex: false,
      username: "", //用户名
      password: "", //密码
      box: false, //是否显示登录框
      headImg: headImg1, //图片路径
      border: false, //宫格边框
    };
  },
  created() {
    const userInfo = JSON.parse(localStorage.getItem("userInfo"));
    //说明已登陆
    if (userInfo) {
      this.fex = true;
      this.username = userInfo.username;
    } else {
    }
  },
  methods: {
    onSubmit(values) {
      //console.log("submit", values);
      loginBy({ username: values["用户名"], pwd: values["密码"] }).then(
        (res) => {
          //console.log(res);
          //判断是否登陆成功
          if (res.data.errno == 0) {
            //改变登陆状态
            this.fex = true;
            //存储token 值和用户信息
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem(
              "userInfo",
              JSON.stringify(res.data.data.userInfo)
            );
            //登陆成功 模态框隐藏
            this.box = false;
            //用户名赋值
            this.username = res.data.data.userInfo.username;
            this.headImg =headImg;
          }
        }
      );
    },
    loginFn() {
      if (this.fex) {
        this.$dialog
          .confirm({
            title: "亲",
            message: "确定退出登陆吗",
          })
          .then(() => {
            // 退出时确认
            localStorage.removeItem("userInfo");
            localStorage.removeItem("token");
            this.fex = false;
            this.headImg =headImg1
          })
          .catch(() => {
            // on cancel
          });
      } else {
        this.box = true;
      }
      //console.log(this);
    },
  },
};
</script>

<style lang='less' scope>
.user {
  .user_top {
    background: #333;
    color: #fff;
    padding: 20px 10px;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      border-radius: 50%;
      margin-right: 10px;
    }
    h3 {
      flex: 1;
    }
  }
  .modal {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    .modal_bg {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }
    .modal_content {
      width: 90%;
      height: 200px;
      position: absolute;
      background: #fff;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      padding-top: 40px;
    }
  }
  .text1 {
    margin-top: 30px;
  }
}
</style>